<div id="commandsPanel" class="col-lg-6 col-md-12">
    <div class="panel panel-default" data-ng-controller="CommandCtrl as cmdVM">
        <div class="panel-heading">
            <span translate>Commands</span>
            <div class="pull-right">
                <button class="btn btn-xs btn-primary" data-ng-click="cmdVM.clear()" translate>Clear</button>
            </div>
        </div>
        <div class="panel-body panel-height">
            <pre data-ng-bind-html="cmdVM.commandOutput" style="min-height: 260px; max-height: 260px" scroll-glue="cmdVM.autoscrollEnabled"></pre>
        </div>
        <div class="panel-footer">
            <div class="col-lg-12">
                <input type="text" placeholder="{{'Send Command...'|translate}}" style="width: 250px;" data-ng-model="cmdVM.command" data-ng-keydown="cmdVM.handleKeyDown($event)" data-ng-keyup="cmdVM.handleKeyUp($event)">
                <button data-ng-click="cmdVM.sendCommand()" class="btn btn-success" translate>Send</button>
                    &nbsp;&nbsp;
                <label><input type="checkbox" data-ng-model="cmdVM.autoscrollEnabled"> <span translate>Autoscroll</span></label>&nbsp;&nbsp;
                <label><input type="checkbox" data-ng-model="cmdVM.filterOutput" data-ng-change='cmdVM.onFilterChange()'> <span translate>Filter temperatures</span></label>
            </div>
        </div>
    </div>
</div>
